<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*元素显示模式转换：改变元素默认的显示特点，让元素符合布局要求*/
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /*行内块*/
            display: inline-block;
            /*行内*/
            /*display: inline;*/
        }

        span {
            width: 300px;
            height: 300px;
            /*行内块*/
            display: inline-block;
            background-color: pink;
            /*块*/
            display: block;
        }
    </style>
</head>
<body>
<div>1111</div>
<div>2222</div>
<span>span</span>
<span>span</span>
</body>
</html>